<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入LayUI的资源-->
    <script src="/layui/layui.js"></script>
    <script src="/js/jquery.js"></script>
    <link href="/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
    <!--使用div布局-->
    <!--使用div布局-->
    <div style="margin-top: 140px;">
        <!--按钮组-->
        <div style="width: 900px;margin: auto";>
            <div id="signDiv" style="text-align: left;width: 450px;display: inline-block;">
                <span id="signSpan">
                     <button id="1" class="layui-btn">早上签到</button>
                     <button id="2" class="layui-btn layui-btn-normal">中午签到</button>
                     <button id="3" class="layui-btn layui-btn-danger">晚上签到</button>
                </span>

                <button id="exportSign" class="layui-btn layui-btn-warm">导出考勤</button>
            </div>
            <div  style="width: 425px;display: inline-block;text-align: right">
                <input  type="text" class="layui-input" placeholder="请选择日期" id="checkDate" style="width: 200px;position: relative;top:38px;left: 130px">
                <button class="layui-btn layui-btn-danger" id="search">点击搜索</button>
            </div>

        </div>
        <!--数据表格-->
        <div style="width: 900px;margin: auto;">
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>


</body>
<script type="text/html" id="checkStatusTpl">
    {{#  if(d.checkStatus===1){ }}
    <span style="color: #F581B1">早上签到</span>
    {{#  } else if(d.checkStatus === '2') { }}
    <span style="color: #F581B1;">中午签到</span>
    {{#  } else { }}
    <span style="color: #F581B1;">晚上签到</span>
    {{#  } }}
</script>


<script>
    layui.use(['table', 'laydate'], function () {
        var table = layui.table;
        var laydate = layui.laydate;
        var layer = layui.layer;
        //执行第一个laydate实例
        laydate.render({
            elem: '#checkDate' //指定元素
        });
        //第一个表格
        table.render({
            elem: '#demo'
            ,height: 315 //设置高度
           , url: '/sign/signUserInfo' //数据接口
           , page: true //开启分页
           , cols: [
                [ //表头
                    {field: 'checkId', title: 'ID', width:80, sort: true, fixed: 'left'},
                    {field: 'checkDate', title: '签到日期', width:200, sort: true, fixed: 'left'}
                    ,{field: 'checkTime', title: '签到时间', width:200, sort: true}
                    ,{field: 'checkStatus', title: '签到状态', width:150,templet:"#checkStatusTpl"}
                    ,{field: 'checkResult', title: '签到结果', width: 150}
                    ,{field: 'remark', title: '备注', width: 200}
                ]
            ]
        });
        //按钮点击事件
        $('#signSpan button').click(function () {
            //发送ajax请求
            if(window.confirm("你确定要进行"+$(this).html()+"吗?")){
                //发送Ajax请求
                $.post("/sign/userSign",{signStatus:$(this).attr("id")},function (result){
                    if(result.code==200){
                        //提示结果
                        layer.open({
                            type:0,
                            content:"签到成功",
                            title:"签到结果"
                        })
                        //重新加载数据表格的数据
                        table.reload("demo",{page: {curr: 1 }})
                    }else if(result.code==300){
                        //提示结果
                        layer.open({
                            type:0,
                            content:"已经签到，请勿重复签到",
                            title:"签到结果"
                        })
                    }else if(result.code==330){
                        //提示结果
                        layer.open({
                            type:0,
                            content:"不在签到时间范围",
                            title:"签到结果"
                        })
                    }else{
                        //提示结果
                        layer.open({
                            type:0,
                            content:"签到失败，请重新签到",
                            title:"签到结果"
                        })
                    }
                })
            }
            //给搜索按钮添加事件
            $("#search").click(function (){
                table.reload('demo', {
                    where: {checkDate: $('#checkDate').val()},
                        page:{page:1}

                });
            })


        });
        //导出考勤信息
        $("#exportSign").click(function (){
            console.log("导出考勤信息")
            window.location.href="/sign/export?checkDate="+$("#checkDate").val()
        })
    });

</script>
</html>